﻿<h4>Neutral appearane</h4>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 1em;">
    <FluentAnchor Href="#" IconStart="@(new Icons.Regular.Size16.Globe())">
        Icon at start
    </FluentAnchor>

    <FluentAnchor Href="#" IconEnd="@(new Icons.Regular.Size16.Globe())">
        Icon at end
    </FluentAnchor>

    <FluentAnchor Href="#">
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="start" />
        Icon at start in content
    </FluentAnchor>

    <FluentAnchor Href="#">
        Icon at end in content
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="end" />
    </FluentAnchor>
</div>
<h4>Hypertext appearane</h4>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 1em;">
    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#" IconStart="@(new Icons.Regular.Size16.Globe())">
        Icon at start
    </FluentAnchor>

    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#" IconEnd="@(new Icons.Regular.Size16.Globe())">
        Icon at end
    </FluentAnchor>

    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#">
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="start" />
        Icon at start in content
    </FluentAnchor>

    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#">
        Icon at start in content
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="end" />
    </FluentAnchor>
</div>

<div style="display: flex; align-items: center; gap: 10px; margin-top: 1em;">
    With icon in default slot:
        <FluentAnchor Href="#" aria-label="test">
            <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" />
        </FluentAnchor>

</div>
